<script setup lang="ts">
import {onBeforeMount, onBeforeUnmount, onMounted, ref, watch} from 'vue'
import {Swiper, SwiperSlide} from 'swiper/vue';
import {FreeMode, Navigation, Pagination, Autoplay} from 'swiper';
import 'swiper/css';
import {getImage} from "@/api";
import {Img} from "@/api/type";
const props = defineProps<{
  imageList: Img[]
}>()

const count = ref(0)
const activeThumb = ref<any>(null)
const imageList = ref<Img[]>([])
//监听props.imageList变化
watch(() => props.imageList, (newVal, oldVal) => {
  if (newVal.length > 0) {
    imageList.value = newVal
  }
},{immediate:true})
const imageBase=''
</script>

<template>
  <section class="relative h-screen">
    <Swiper
        :modules="[FreeMode, Navigation, Autoplay]"
        :loop="true"
        :spaceBetween="10"
        :navigation="true"
        :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
        }"
        class="full-slider h-screen"
    >
      <SwiperSlide v-for="(item,index) in imageList" :key="index">
          <img
              :src="imageBase+item.url"
              class="absolute inset-0 h-full w-full object-contain"
           alt=""/>
      </SwiperSlide>
    </Swiper>
  </section>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
